import React, { Component } from 'react'
import axios from 'axios'
import {Product} from '../../../types/product'
import ProductItem from '../../../component/productItem'
import {connect} from 'react-redux'

interface IProps{
    list:Product[],
    initData:(list:Product[])=> void
}

interface IState{
    list:Product[]
}

class Home extends Component<IProps,IState> {
    state = {
        list:[]
    }
    componentDidMount(){
        axios.get('/api/list').then(res => {
            this.props.initData(res.data.list);
            this.setState({
                list:res.data.list
            })
        })
    }
    render() {
        let {list} = this.state;
        console.log(this.props.list);
        return (
            <div>
                <div>
                {list.length && list.map((item:Product) => <ProductItem key={item.id} {...item}></ProductItem> )}
                </div> 
                
            </div>
        )
    }
}

let stateMapToProps = (state:any) => {
    return {
        list:state.car.list
    }
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        initData:(list:Product[]) => {
            dispatch({type:'INIT_DATA',list})
        }
    }
}

export default connect(stateMapToProps,dispatchMapToProps)(Home)
